
:root{
  @each $name, $value in $colors {
    --app-color-#{"" + $name}: #{$value}; // 输出：--app-color-base: #236edd;
  }

  @each $name, $value in $screen {
    --app-screen-#{"" + $name}: #{$value}; // 输出：--app-screen-header-height: 55;
  }
}

:root{
  --app-base-unit: 1px;
  // --app-base-unit: 0.01rem; // 对应根字体大小为100px
}

@import "./transition.scss";
@import "./animation.scss";
@import "./element-plus.scss";

body {
  margin: 0;
  padding: 0;
  background: color(bg);
  color: #ffffff;
  height: 100%;
  font-size: size(14);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, Arial, sans-serif;
}

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  outline: none;
}

div:focus {
  outline: none;
}

.no-padding {
  padding: 0 !important;
}

.no-margin {
  margin: 0 !important;
}

.fr {
  float: right;
}

.fl {
  float: left;
}

.bold {
  font-weight: bold !important;
}

$num: 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95,
  100;
@each $n in $num {
  .pl-#{$n} {
    padding-left: size(#{$n})!important;
  }
  .pr-#{$n} {
    padding-right: size(#{$n})!important;
  }
  .pt-#{$n} {
    padding-top: size(#{$n})!important;
  }
  .pb-#{$n} {
    padding-bottom: size(#{$n})!important;
  }
  .ml-#{$n} {
    margin-left: size(#{$n})!important;
  }
  .mr-#{$n} {
    margin-right: size(#{$n})!important;
  }
  .mt-#{$n} {
    margin-top: size(#{$n})!important;
  }
  .mb-#{$n} {
    margin-bottom: size(#{$n})!important;
  }
}

.mt-0 {
  margin-top: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

$display: flex, block, inline;
@each $d in $display {
  .#{$d} {
    display: $d;
  }
}

$fontSzie: 12, 14, 16, 18, 20, 22, 24, 26, 28, 30;
@each $f in $fontSzie {
  .font-#{$f} {
    font-size: size(#{$f}) !important;
  }
}

.text-center {
  text-align: center !important;
}

.pointer {
  cursor: pointer !important;
}

.pointer-events-none{
  pointer-events: none;
}

.pointer-events-auto{
  pointer-events: auto;
}

.clearfix {
  &:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
  }
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scroll-style {
  /*整体样式*/
  &::-webkit-scrollbar {
    // display: none;
    width: size(6);
    /*高宽分别对应横竖滚动条的尺寸*/
    height: size(6);
    background: rgba(0, 0, 0, 1);
  }

  /*滚动条滑块*/
  &::-webkit-scrollbar-thumb {
    border-radius: size(6);
    box-shadow: none;
    background: #7acaff;
  }

  /*滚动条轨道*/
  &::-webkit-scrollbar-track {
    box-shadow: none;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }

  /*滚动条边角，即两个滚动条的交汇处*/
  &::-webkit-scrollbar-corner {
    background: none;
  }
}

.width-100 {
  width: 100% !important;
}